<template>

  <div>
    
    <div class="chain-link-bar-wrapper">
  		<el-breadcrumb separator-class="el-icon-arrow-right">
	  		<el-breadcrumb-item>商铺管理</el-breadcrumb-item>
	  		<el-breadcrumb-item to="/product">商品列表</el-breadcrumb-item>
	  	</el-breadcrumb>  
	</div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品列表</span>

      </div>

      <div class="app-diliver-10"></div>

      <div class="clearfix app-tabs-wrapper color-black-third">
        <span 
          :class="{'color-theme': page.auditStatus == -1}"
          class="app-tab app-margin-r-40" 
          @click="selectTabStatus(-1)"
          >全部</span>
        <span 
          :class="{'color-theme': page.auditStatus == 0}"
          class="app-tab app-margin-r-40" 
          @click="selectTabStatus(0)"
          >未审核</span>
        <span 
          :class="{'color-theme': page.auditStatus == 1}"
          class="app-tab app-margin-r-40"
          @click="selectTabStatus(1)"
          >审核通过</span>
        <span 
          :class="{'color-theme': page.auditStatus == 2}"
          class="app-tab app-margin-r-40"
          @click="selectTabStatus(2)"
          >不通过</span>
      </div>

      <div class="app-diliver-15"></div>
      <div class="app-diliver-15"></div>

      <div>
        <div class="app-display-inline app-margin-h-20">
          <span class="color-black-second font-size-text">关键字：</span>
          <el-input
            clearable
            placeholder="商品名"
            v-model="page.keyWord"
            style="width: 380px;"
              ></el-input>
        </div>

        <div class="app-display-inline app-margin-h-20">
          <SubmitButton
            type="primary" 
            plain
            icon="el-icon-search"
            :post-option="{
              url: searchUrl,
              data: page,
              callback: searchCB
            }"
            >搜索</SubmitButton>
        </div>
      </div>

      <div class="app-diliver-15"></div>
      <div class="app-diliver-15"></div>
      
      <el-table :data="productList" stripe border @sort-change="sortMethod" style="width: 100%" class="nc-table-btn-ctrl">
        <el-table-column type="index" :index="indexMethod">
        </el-table-column>
        
        <el-table-column
          label="商铺名称"
          width="200">
          <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="产品名称"
          width="300">
          <template slot-scope="scope">
            <span>{{scope.row.product_name}}</span>
          </template>
        </el-table-column>

        <el-table-column sortable="custom"  prop="indate" label="上架时间" />

        <el-table-column
          label="审核状态">
          <template slot-scope="scope">
            <span class="text-bold color-warning" v-if="scope.row.audit_status == 0">待审核</span>
            <span class="text-bold color-success" v-if="scope.row.audit_status == 1">通过</span>
            <span class="text-bold color-danger" v-if="scope.row.audit_status == 2">未通过</span>
          </template>
        </el-table-column> 

        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.audit_status == 0 || scope.row.audit_status == 2"
              type="success" 
              plain 
              size="mini" 
              @click="checkStatusHandle(scope.row.product_id, 1)">通过</el-button>
            <el-button
              v-if="scope.row.audit_status == 0 || scope.row.audit_status == 1"
              type="warning" 
              plain 
              size="mini" 
              @click="checkStatusHandle(scope.row.product_id, 0)">不通过</el-button>

            <!--<NcButton
			  v-if="role > 1"
              size="mini"
              type="danger"
              :post-option="{url: deleteUrl, callback: getPage, confirm: '确定要删除活动信息【'+ scope.row.product_name +'】吗？', data: {id: scope.row.product_id} }"
              class="app-margin-l-10 app-margin-v-5"
              >删除</NcButton>-->

            <a class="" :href="'#/product/detail/' + scope.row.product_id" target="_blank">
              <el-button
              plain 
              size="mini" 
              >详情</el-button>
            </a>
          </template>
        </el-table-column>
      </el-table>


      <div class="pager-bar-wrapper">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="page.totalRow"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          @current-change="pageNumChange"
          @prev-click="pageNumChange"
          @next-click="pageNumChange"
          @size-change="pageSizeChange"
          >
        </el-pagination>
      </div>

    </el-card>	

    <CheckStatusEdit :is-show="checkStatusEditVisible" :activity-obj="editProduct" :check-yes="checkYes"></CheckStatusEdit>

  </div>

</template>

<script>
import NcButton from '../common/NcButton';
import SubmitButton from '../common/SubmitButton';
import CheckStatusEdit from './CheckStatusEditDialog';

import Api from '../../api/Api';
import ProductApi from '../../api/ProductApi';

import JsonKit from '../../kit/JsonKit';

import { mapGetters } from 'vuex';
//需要导入vuex的数据管理
import Store from '../../store/index.js'

export default {
	components: {
		NcButton,
		SubmitButton,
		CheckStatusEdit
	},
	data() {
		return {
            productList: [],

			page: {
                auditStatus: -1,
				keyWord: '',
				pageNum: 1,
				pageSize: 10
			},

			checkStatusEditVisible: false,
			checkYes: 0,
			editProduct: {},

			searchUrl: ProductApi.URL_LIST,
			deleteUrl: ProductApi.URL_DELETE,
			
			role: 0
		};
	},
	computed: {
		...mapGetters(['hasPerm'])
	},
	created() {
		this.getPage();
		this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
		this.role = Store.state.user.role;
	},
	beforeDestroy: function() {
		this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
	},
	methods: {
		sortMethod(column) {
			this.page.columnProp = column.prop;
			this.page.columnOrder = column.order;
			this.getPage();
		},
		searchCB(json) {
			this.productList = json.list;
			this.setPage(json);
		},
		getPage() {
            ProductApi.list(this.page, json => {
				this.productList = json.list;
				this.setPage(json);
			});
		},
		pageNumChange(pageNum) {
			this.page.pageNum = pageNum;
			this.getPage();
		},
		pageSizeChange(pageSize) {
			this.page.pageSize = pageSize;
			this.getPage();
		},
		setPage(json) {
			this.page.pageNum = json.pageNum;
			this.page.pageSize = json.pageSize;
			this.page.totalRow = json.totalRow;
		},
		indexMethod(index) {
			return index + 1 + (this.page.pageNum - 1) * this.page.pageSize;
		},
		selectTabStatus(auditStatus) {
			this.page.auditStatus = auditStatus;
			this.page.pageNum = 1;
			this.getPage();
		},
		checkStatusHandle(productId, checkYes) {
			this.editProduct = JsonKit.getOf(this.productList, 'product_id', productId, null);
			this.checkYes = checkYes;
			this.checkStatusEditVisible = true;
		},
		hideEditDialog(isSuccess) {
			this.checkStatusEditVisible = false;
			this.editProduct = {};

			if (isSuccess) {
				this.getPage();
			}
		}
	}
};
</script>
